<script lang="ts" setup>
// #region 引入包, 函数和组件
import type { UserListData } from '@/interfaces/RequestType'
import type { TableInstance } from 'element-plus'
import { ref } from 'vue'
import * as XLSX from 'xlsx'
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const emits = defineEmits<{
  (e: 'openDialog', row?: UserListData): void
  (e: 'getSelectionRows'): UserListData[]
}>()
const { table } = defineProps<{
  table: TableInstance | undefined
}>()
// #endregion

// #region // 变量
const search_value = ref('') // 搜索值
// #endregion

// #region // 函数
// 点击打开弹窗
const open = () => {
  emits('openDialog')
}
const exportSelected = () => {
  if (!table) return
  const rows = table.getSelectionRows()
  console.log(rows)
  const book = XLSX.utils.book_new()
  const sheet = XLSX.utils.json_to_sheet(rows)
  XLSX.utils.book_append_sheet(book, sheet, 'Sheet1')
  XLSX.writeFile(book, 'users.xlsx')
}
// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <div class="table_search">
    <el-text line-clamp="1">输入要查询的用户名: </el-text>
    <el-input v-model="search_value" clearable prefix-icon="Search"></el-input>
    <el-button plain type="info">查询</el-button>
    <el-button plain type="primary" @click="open">新增</el-button>
    <el-button type="success" :disabled="!table || table.getSelectionRows().length === 0" @click="exportSelected">导出选中</el-button>
  </div>
</template>

<style lang="sass" scoped>
.table_search
  display: flex
  align-items: center
  padding: 20px

  .el-input
    width: 200px
    margin: 0 20px
</style>
